<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 声破天 - 开始聆听音乐</title>
    <link rel="stylesheet" href="assets/css/login.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
    <div class="container">
        <header>
            <div class="logo">
                <a href="index.html" title="index">
                    <svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="25" cy="25" r="20" fill="#1DB954" />
                        <path d="M18 27.5C18 27.5 22 23.5 25 23.5C28 23.5 32 27.5 32 27.5" stroke="black" stroke-width="2"
                            fill="none" />
                        <path d="M16 21.5C16 21.5 22 15.5 25 15.5C28 15.5 34 21.5 34 21.5" stroke="black" stroke-width="2"
                            fill="none" />
                        <path d="M14 15.5C14 15.5 21 7.5 25 7.5C29 7.5 36 15.5 36 15.5" stroke="black" stroke-width="2"
                            fill="none" />
                        <text x="50" y="32" font-family="Arial, sans-serif" font-size="24" font-weight="bold"
                            fill="#ffffff">声破天</text>
                    </svg>
                </a>
            </div>
        </header>

        <main class="signup-form">
            <h1>注册以开始聆听</h1>

            <form action="#" method="POST">
                <div class="form-group">
                    <label for="email">电子邮件地址</label>
                    <input type="email" id="email" name="email" placeholder="输入您的电子邮件" required>
                </div>

                <button type="submit" class="btn btn-primary">下一步</button>

                <div class="separator">
                    <span>或</span>
                </div>

                <div class="social-signup">
                    <button type="button" class="btn btn-social btn-google">
                        <i class="fab fa-google"></i>
                        使用Google注册
                    </button>
                    <button type="button" class="btn btn-social btn-facebook">
                        <i class="fab fa-facebook-f"></i>
                        使用Facebook注册
                    </button>
                    <button type="button" class="btn btn-social btn-apple">
                        <i class="fab fa-apple"></i>
                        使用Apple注册
                    </button>
                </div>

                <div class="login-link">
                    <p>已有账号？<a href="login.html">在此登录</a></p>
                </div>
            </form>

            <div class="legal-text">
                <p>本网站受 reCAPTCHA 保护，适用 Google <a href="#">隐私政策</a>和<a href="#">服务条款</a>。</p>
            </div>
        </main>
    </div>

    <script src="assets/js/login.js"></script>
</body>

</html>